<template>
  <div class="page-content">
    <div class="header">
      <h3>PC电脑端设置</h3>
    </div>
    <el-form label-width="95px" style="margin-top: 20px">
      <el-form-item label="访问权限:">
        <el-radio-group v-model="selectedValues" @change="change">
          <el-radio v-for="option in options" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="驾校ID:">
        {{ store_id }}
      </el-form-item>
      <el-form-item label="访问连接:">
        <el-link :href="`https://www.lutongjiakao.com/pc/login?store_id=${store_id}`" underline="never" target="_blank"
          style="color: var(--main-color)">https://www.lutongjiakao.com/pc/login</el-link>
        <!-- <el-link :href="`http://192.168.2.60:5173/pc/?store_id=${store_id}`" underline="never" target="_blank"
          style="color: var(--main-color)">http://jk.lutongjiakao.com/pc/login</el-link> -->
      </el-form-item>
      <el-form-item label="软件下载:">
        <div class="download">
          <!-- <div v-for="(item, index) in downloadList" :key="index" @mouseenter="activeIndex = index"
            @mouseleave="activeIndex = null" @click="toLink(index)">
            <div class="download_item">
              <img :src="activeIndex === index ? item.hoverImage : item.defaultImage" />
              <p class="center">{{ activeIndex === index ? item.hoverText : item.defaultText }}</p>
            </div>
          </div> -->
          <div class="download-section">
            <div class="qr-code">
              <img src="https://image.lutongjiakao.com/system/f5892041dcd347ea8cf446a44115c8a1.png" alt="" />
            </div>
            <div class="download-info">
              <div class="download-btn" @click="downloadClient">
                立即下载
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getStoreInfo } from '@/api/homeApi'
import { EditBasicSetting } from '@/api/driverSchoolApi'
import windows from '@/assets/img/windows.png'
import download from '@/assets/img/download.png'
import student from '@/assets/img/student.png'
import Ipad from '@/assets/img/Ipad.png'

const selectedValues = ref('2')
const store_id = localStorage.getItem('lty-store-id')

const options = ref([
  { value: '2', label: '普通用户' },
  { value: '1', label: '报名学员' }

])
const activeIndex = ref()
const downloadList = ref([
  // {
  //   defaultImage: windows,
  //   hoverImage: download,
  //   defaultText: '驾校管理端',
  //   hoverText: '点击下载',
  // },
  {
    defaultImage: student,
    hoverImage: download,
    defaultText: '学员端',
    hoverText: '点击下载',
  },
  // {
  //   defaultImage: Ipad,
  //   hoverImage: download,
  //   defaultText: '网页H5端',
  //   hoverText: '点击访问',
  // },
])
const sys = reactive({
  AppId: ''
})
const isEdit = ref(false)

const edit = () => {
  isEdit.value = !isEdit.value
}

const id = ref('')
const getData = async () => {
  const res = await getStoreInfo()
  if (res.code === '00000') {
    selectedValues.value = res.data.visitType || '2'
    id.value = res.data.id
  }
}

const change = async (e: any) => {
  const res = await EditBasicSetting(Number(id.value), {
    visitType: e
  })
  if (res.code === '00000') {
    ElMessage.success('编辑成功')
    getData()
  }
}
const toLink = (e: number) => {
  if (e === 2) {
    window.open("http://jk.lutongjiakao.com/pc/login");
  }
}
const downloadClient = (index: any) => {
  window.open('https://lutongyun.lanzoub.com/iTaQf3c0flre')
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.page-content {
  .svg-icon {
    width: 1.8em;
    height: 1.8em;
    overflow: hidden;
    vertical-align: -8px;
    fill: currentcolor;
  }
}

.iptbox {
  width: 30%;
  display: flex;
}

.iptbox .iptboxipt {
  width: 85%;
}

.iptbox>button {
  margin-left: 1.5rem;
}

.download {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  cursor: pointer;
}

.download_item {
  width: 180px;
  height: 180px;
  box-shadow: 0px 0px 9px 0px #d3d3d3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  img {
    width: 60px;
    height: 60px;
  }
}

.center {
  text-align: center;
  font-size: 16px;
}

.download-section {
  display: flex;
  align-items: center;
  gap: 30px;
}

.qr-code {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.download-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.download-btn {
  background: rgb(17, 200, 113);
  color: #fff;
  border: none;
  /* 设置固定宽度 */
  width: 160px;
  padding: 6px 0;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  text-align: center;
}

.version-info {
  font-size: 14px;
  color: #999;
  text-align: center;
}
</style>
